<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px red solid;
        }
        input {
            border: 5px yellowgreen solid;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div>盒子</div>
    <input type="text">
    <script>
        // 1.找到元素
        const div = document.querySelector('div')
        // 2.绑定事件
        // 如果用箭头函数, this 就是 window
        // 用普通的匿名函数, this 就是当前这个 dom 元素
        div.addEventListener('click', function() {
            // css 中的 js 中使用驼峰命名
            // 修改样式, 先点 style, 再点样式
            this.style.backgroundColor = '#0094ff'
            // 其他属性直接写即可
            this.innerHTML = '翻滚包蛋炒饭'
        })
        div.addEventListener('mouseenter', function() {
            console.log('enter')
            this.style.backgroundColor = 'red'
        })
        div.addEventListener('mouseleave', function() {
            console.log('leave')
            this.style.backgroundColor = 'white'
        })

        // 获取输入框
        const ipt = document.querySelector('input')
        // 绑定事件
        // 需求1: 失去焦点之后, 如果输入框没有内容, 加上红色边框
        // 需求2: 按了回车之后, 获取用户输入的内容, 弹框提示
        // 需求3: 用户输入内容的时候, 判断输入的是否是邮箱. 不是, 输入框变红; 是, 变绿
        ipt.addEventListener('focus', function() {
            console.log('focus')
        })
        ipt.addEventListener('blur', function() {
            console.log('blur')
            if (this.value === ''){
                this.style.border = '10px red solid'
            }
        })
        ipt.addEventListener('keydown', function() {
            console.log('keydown')
        })
        // 有事件参数, 要用可以获取
        ipt.addEventListener('keyup', function(e) {
            console.log('keyup')
            // 按了回车
            if (e.keyCode === 13){
                alert(this.value)
            }
        })
        ipt.addEventListener('input', function() {
            console.log('input')
            const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
            if (emailRegex.test(this.value)) {
                this.style.backgroundColor = 'green'
            } else {
                this.style.backgroundColor = 'red'
            }
        })
    </script>
</body>
</html>